<template>
  <div>
    <div style="display: flex;">
      <el-card class="box-card" style="width: 100%">
        <div slot="header" class="clearfix">
          <span>用户列表</span>
        </div>
        <div>
          <el-table
              :data="userList"
              style="width: 100%">
            <el-table-column prop="id" label="序号" ></el-table-column>
            <el-table-column prop="username" label="用户名" ></el-table-column>
            <el-table-column prop="name" label="姓名" ></el-table-column>
            <el-table-column prop="phone" label="手机号码" ></el-table-column>
            <el-table-column prop="address" label="地址"></el-table-column>
            <el-table-column label="文件上传">
              <template v-slot="scope">
                <el-upload
                    :action="$baseUrl+'/file/upload'"
                    :headers="{token:user.token}"
                    :on-success="(row,file,fileList)=>onTableSuccess(scope.row,file,fileList)"
                    :show-file-list="false"
                >
                  <el-button size="mini" type="primary">点击上传</el-button>
                </el-upload>
              </template>
            </el-table-column>
            <el-table-column label="预览">
              <template v-slot="scope">
                <el-image v-if="scope.row.avatar" :src="scope.row.avatar" style="width: 50px;height: 50px"></el-image>
                <div>
                  <el-button type="success" size="mini" v-if="scope.row.avatar" @click="perView(scope.row.avatar)">下载</el-button>
                </div>
              </template>

            </el-table-column>

          </el-table>
        </div>
      </el-card>
    </div>
    <div style="display: flex;margin-top: 10px">
      <el-card class="block" style="width: 50%">
        <div slot="header" class="clearfix">
          <span>系统公告</span>
        </div>
        <el-timeline>
          <el-timeline-item v-for="item in notices" :id="item.id" :timestamp="item.time" placement="top">
            <el-card>
              <h4>{{item.title}}</h4>
              <p>{{item.content}}</p>
            </el-card>
          </el-timeline-item>
        </el-timeline>
      </el-card>

      <el-card class="block" style="width: 50%;margin: 0 5px">
        <div slot="header" class="clearfix">
          <span>系统公告</span>
        </div>
        <el-collapse v-model="activeNames"  @change="handleChange">
          <el-collapse-item v-for="(item,index) in notices" :id="item.id" :name="index+''">
            <template slot="title">
              <h4>{{item.title}}</h4>
            </template>
            <div>{{item.content}}</div>
          </el-collapse-item>
        </el-collapse>
      </el-card>
    </div>

    <div style="display: flex;margin-top: 10px">
      <el-card class="box-card" style="width: 50%;margin-right: 10px">
        <div slot="header" class="clearfix">
          <span>文件上传下载</span>
        </div>
        <div>
          <el-upload
              :action="$baseUrl+'/file/upload'"
              :headers="{token:user.token}"
              list-type="picture"
              :on-success="onSuccess"
          >
            <el-button size="small" type="primary">点击上传</el-button>
          </el-upload>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import request from "@/utils/request";

export default {
  name: "Home",
  data(){
    return {
      userList:[],
      user:JSON.parse(localStorage.getItem("user") || '{}'),
      notices:[],
      activeNames:['0']
    }
  },
  mounted() {  //页面加载时触发
    // axios.get("http://localhost:9092/user/selectAll").then(res=>{
    //   const {code,data} = res.data
    //   if (code==='200') this.userList=data
    // })
    request.get('/user/selectAll').then(res=>{
      this.userList=res.data
    })
  },
  created() {
    this.queryNotices()
  },
  methods:{
    handleChange(val){
      console.log(val)
      this.activeNames=val
    },
    queryNotices(){
      this.$request.get(`/notice/selectNotices`).then(res=>{
        this.notices=res.data
      })

    },
    onSuccess(response, file, fileList){
      this.fileList=fileList
    },
    onTableSuccess(row,file,fileList){
      row.avatar = file.response.data
      request.post('/user/update',{...row}).then((res)=>{
            console.log(res)
            if (res.code==='200'){
              this.$message.success('上传成功')
            }else {
              this.$message.error('上传失败')
            }
          },
          error=>{
            console.log(error)
          })
    },
    perView(url){
      window.open(url)
    }
  }
}
</script>

<style scoped>

</style>